import React from 'react';
import { Form, Icon, Input, Button, Alert} from 'antd';
import Axios from '../../assets/js/axios'
import {connect} from 'react-redux'
import {alertInfo} from './../redux/action'
const FormItem = Form.Item;

class New extends React.Component {
    state = {
        visibility: false,
        data: {},
        alertData: {}
    }

    componentWillMount() {
        this.mounted = true
        if(this.props.match.params.id) {
            Axios.ajax({
                url: '/api/users/queryUsersByCondition',
                methods: 'get',
                params:{
                    id: this.props.match.params.id
                }
            }).then((res) => {
                if(this.mounted) {
                    this.setState({
                        data: res.data[0]
                    })
                }
            })
        }
        const {dispatch} = this.props;
        dispatch(alertInfo({}))
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let url = this.props.match.params.id ? `updateUser?id=${this.props.match.params.id}` : 'insertUser'
                Axios.ajax({
                    url: `api/users/${url}`,
                    methods: 'POST',
                    params: values
                }).then((res) => {
                        if(res.code === '000000') {
                            const {dispatch} = this.props;
                            dispatch(alertInfo(res))
                            this.props.history.push('/dashboard/user')
                        } else {
                            if(this.mounted) {
                                this.setState({
                                    alertData: res,
                                    visibility: true
                                })
                            }
                        }
                        
                })
            }
        })
    }

    onClose = (e) => {
        if(this.mounted) {
            this.setState({
                visibility: false
            })
        }
    }

    componentWillUnmount() {
        this.mounted = false
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 9 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 15,
                    offset: 9,
                },
            },
        };
        const rules = this.props.match.params.id ? '' : [{ required: true, message: '请输入密码！' }]
        return (
            <div className="newuser">
                {
                    this.state.visibility ? <div className="alert"><Alert {...this.state.alertData}></Alert> <Icon onClick={this.onClose} type="close" /> </div> : null
                }
                <Form onSubmit={this.handleSubmit} className="login-form" style={{marginTop: 30}}>
                    <FormItem label="用户名" {...formItemLayout}>
                        {getFieldDecorator('username', {
                            rules: [{ required: true, message: '请输入用户名！' }],
                            initialValue: this.state.data.username
                        })(
                            <Input placeholder="请输入用户名！" autoComplete="off" disabled={this.props.match.params.id? true : false}/>
                        )}
                    </FormItem>
                    <FormItem label="密码" {...formItemLayout}>
                        {getFieldDecorator('password', {
                            rules: rules
                        })(
                            <Input placeholder="请输入密码！" autoComplete="off"/>
                        )}
                    </FormItem>
                    <FormItem label="手机号" {...formItemLayout}>
                        {getFieldDecorator('phone_number', {
                            initialValue: this.state.data.phone_number
                        })(
                            <Input type="phone" placeholder="请输入手机号！" autoComplete="off"/>
                        )}
                    </FormItem>
                    <FormItem label="邮箱" {...formItemLayout}>
                        {getFieldDecorator('email', {
                            initialValue: this.state.data.email
                        })(
                            <Input placeholder="请输入邮箱！" autoComplete="off"/>
                        )}
                    </FormItem>
                    <FormItem label="昵称" {...formItemLayout}>
                        {getFieldDecorator('nickname', {
                            initialValue: this.state.data.nickname
                        })(
                            <Input placeholder="请输入昵称！" autoComplete="off"/>
                        )}
                    </FormItem>
                    <FormItem label="备注" {...formItemLayout}>
                        {getFieldDecorator('remark', {
                            initialValue: this.state.data.remark
                        })(
                            <Input placeholder="请输入备注！" autoComplete="off"/>
                        )}
                    </FormItem>
                    <FormItem {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            提交
                        </Button>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

export default connect()(Form.create()(New));